<template>
    <div class="assetsConfirm">
        <!--搜索框-->
        <div class="interview-header">
            <el-form ref="searchItem" :model="searchItem" :inline="true"  class="demo-form-inline">
                <el-form-item label="订单编号" class="search-item" prop="loanNo">
                    <el-input v-model="searchItem.loanNo" placeholder="订单编号"></el-input>
                </el-form-item>
                <el-form-item label="用户手机号" class="search-item" prop="phone">
                    <el-input v-model="searchItem.phone" placeholder="用户手机号"></el-input>
                </el-form-item>
                <el-form-item label="借款人" class="search-item" prop="realName">
                    <el-input v-model="searchItem.realName" placeholder="借款人"></el-input>
                </el-form-item>
                <el-form-item label="风控状态" prop="assetStatus">
                    <el-select  v-model.number="searchItem.assetStatus" placeholder="风控状态">
                        <el-option label="未确认" :value=0></el-option>
                        <el-option label="不通过" :value=1></el-option>
                        <el-option label="通过" :value=2></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="fa-search" @click="loadData()">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button icon="fa-repeat" @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!--列表-->
        <div class="table-box">
            <el-table border :data="tableData" tooltip-effect="dark">
                <el-table-column type="index" align="center" label="序号" width="70"></el-table-column>
                <el-table-column prop="assetStatus" align="center" label="状态"></el-table-column>
                <el-table-column prop="createTime" align="center" label="申请时间" width="190"></el-table-column>
                <el-table-column prop="loanNo" align="center" label="订单编号" width="200">
                    <template scope="scope">
                        <router-link :to="{path: '/apply/borrowerDetails', query: {loanNo: scope.row.loanNo, userNo: scope.row.userNo}}" style="color: #20a0ff">{{scope.row.loanNo}}</router-link>
                    </template>
                </el-table-column>
                <el-table-column prop="realName" align="center" label="借款人" width="110"></el-table-column>
                <el-table-column prop="idcard" align="center" label="身份证号码" width="200"></el-table-column>
                <el-table-column prop="phone" align="center" label="手机号" width="130"></el-table-column>
                <el-table-column prop="carType" align="center" label="车型" width="150"></el-table-column>
                <el-table-column prop="carRemark" align="center" label="说明" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="loanAmount" align="center" label="申请额度（元）" width="140"></el-table-column>
                <el-table-column prop="loanTime" align="center" label="申请期限" width="100"></el-table-column>
                <el-table-column prop="salesman" align="center" label="业务员" width="150"></el-table-column>
                <el-table-column prop="signTime" align="center" label="面签时间" width="190"></el-table-column>
                <el-table-column prop="signUser" align="center" label="面签人" width="150"></el-table-column>
                <el-table-column prop="signAmount" align="center" label="面签额度（元）" width="140"></el-table-column>
                <el-table-column prop="signLoanTime" align="center" label="借款期限" width="100"></el-table-column>
                <el-table-column prop="signInterestRate" align="center" label="利率（%）" width="120"></el-table-column>
                <el-table-column prop="signFee" align="center" label="综合服务费（元）" width="160"></el-table-column>
                <el-table-column prop="signRepayType" align="center" label="还款方式" width="100"></el-table-column>
                <el-table-column prop="signRemark" align="center" label="面签说明" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" label="风控初审时间" prop="riskTime" width="170"></el-table-column>
                <el-table-column align="center" label="风控初审人员" prop="riskUser" width="140"></el-table-column>
                <el-table-column align="center" label="风控初审额度（元）" prop="riskAmount" width="180"></el-table-column>
                <el-table-column align="center" label="风控初审借款期限" prop="riskLoanTime" width="160"></el-table-column>
                <el-table-column align="center" label="风控初审利率（%）" prop="riskInterestRate" width="180"></el-table-column>
                <el-table-column align="center" label="风控初审综合服务费（元）" prop="riskFee" width="220"></el-table-column>
                <el-table-column align="center" label="风控初审还款方式" prop="riskRepayType" width="170"></el-table-column>
                <el-table-column align="center" label="风控初审说明" prop="riskRemark" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" label="协议签署" width="100">
                    <template scope="scope">
                        <span v-if="scope.row.protocolStatus=== 0">未签署</span>
                        <span style="color: #20a0ff;text-decoration: underline;cursor: pointer;" v-else-if="scope.row.protocolStatus === 1" @click="openProtocolsDialog(scope.row)">查看协议</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="签署人员" prop="protocolUser" width="150"></el-table-column>
                <el-table-column align="center" label="家访资料" width="100">
                    <template scope="scope">
                        <span @click="openVisitPhoto(scope.row)" style="color: #20a0ff;text-decoration: underline;cursor: pointer;">查看</span>
                    </template>
                </el-table-column>
                <el-table-column  prop="visitRemark" align="center" label="家访说明" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column  prop="visitUser" align="center" label="家访人员" width="150"></el-table-column>
                <el-table-column  prop="visitConfirmRemark" align="center" label="家访确认" width="140" show-overflow-tooltip></el-table-column>
                <el-table-column  prop="visitConfirmUser" align="center" label="确认人员" width="100"></el-table-column>
                <el-table-column align="center" label="手续费（元）" width="140">
                    <template scope="scope">
                        <el-button size="small" v-if="scope.row.auditStatus == 0" @click="clickFeeAmount(scope.row)">待核算</el-button>
                        <span style="color: #20a0ff;text-decoration: underline;cursor: pointer;" v-else-if="scope.row.auditStatus == 1" @click="clickFeeAmount(scope.row)">{{scope.row.feeAmount}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="auditor" align="center" label="核算人员" width="150"></el-table-column>
                <el-table-column prop="rmUser" align="center" label="风控核算" width="140"></el-table-column>
                <el-table-column align="center" label="资产确认" fixed="right" width="140">
                    <template scope="scope">
                        <el-button size="small" type="primary" @click="openAssetConfirm(scope.row)" v-if="scope.row.assetStatus === '未确认'">确认</el-button>
                        <span v-else>{{scope.row.assetUser}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" fixed="right" width="100">
                    <template scope="scope">
                        <el-button size="small" @click="returnLoan(scope.row)">退回</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--分页-->
        <div class="pageNum">
            <el-pagination
                @current-change ="handleCurrentChange"
                @size-change="handleSizeChange"
                :pageNum-sizes="pagesize"
                layout="prev, pager, next, total, sizes"
                :total="total">
            </el-pagination>
        </div>

        <!--资产确认-->
        <el-dialog title="资产确认" :visible.sync="dialogAssetConfirm" class="dialogAssetConfirm" :before-close="closeAssetConfirm">
            <el-form label-width="80px" :rules="ruleAssetConfirm" :model="AssetConfirm" ref="AssetConfirm">
                <el-form-item label="是否通过" prop="passStatus" required>
                    <el-radio-group v-model="AssetConfirm.passStatus">
                        <el-radio :label=1>通过</el-radio>
                        <el-radio :label=0>不通过</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="确认时间" prop="assetConfirmTime">
                    <el-date-picker
                        v-model="AssetConfirm.assetConfirmTime"
                        type="datetime"
                        placeholder="确认时间"
                        :default-value="AssetConfirm.assetConfirmTime"
                    >
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="确认人" prop="assetUser" required>
                    <el-input :value="rmUserInfo" :disabled="true"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitAssetConfirm()">确 定</el-button>
                <el-button @click="closeAssetConfirm">取 消</el-button>
            </div>
        </el-dialog>

        <!--费用核算表-->
        <el-dialog title="费用核算表" :visible.sync="costAccountingDialog" class="costAccountingDialog">
            <div class="costAccountingBox">
                <div class="costTableItme">
                    <table class="cost-table">
                        <tr>
                            <th width="60">序号</th>
                            <th>收费项目</th>
                            <th width="150">收费标准</th>
                            <th width="150">实收金额</th>
                            <th width="150">备注</th>
                        </tr>
                        <tr v-for="(item, index) in LoanFeeDetails.listLoanFee">
                            <td>{{index + 1}}</td>
                            <td>{{item.feeName}}</td>
                            <td><span>{{item.feeAmount}}</span></td>
                            <td>{{item.fee}}</td>
                            <td>{{item.remark}}</td>
                        </tr>
                        <tr>
                            <td colspan="3">合计应收</td>
                            <td>{{LoanFeeDetails.costAccountingSum}}元</td>
                            <td>/</td>
                        </tr>
                    </table>
                </div>
            </div>
        </el-dialog>

        <!--查看协议-->
        <el-dialog title="协议" :visible.sync="protocolsDialog" class="Dialog">
            <el-carousel :autoplay="false" arrow="always" v-if="this.protocolsData.length>0" height="200px" indicator-position="outside" trigger="click">
                <el-carousel-item v-for="(item, index) in protocolsData" :key="index">
                    <img class="p-file" :src="item.protocolContent" alt="协议照片异常" @click="openBigPhoto(item.protocolContent)">
                </el-carousel-item>
            </el-carousel>
            <p v-else-if="this.protocolsData.length === 0" style="text-align: center;">暂无协议照片</p>
        </el-dialog>

        <!--家访照片-->
        <el-dialog title="家访照片" :visible.sync="visitPhotoDialog" class="Dialog">
            <el-carousel :autoplay="false" arrow="always" v-if="this.visitPhotoData.length>0" height="200px" indicator-position="outside" trigger="click">
                <el-carousel-item v-for="(item, index) in visitPhotoData" :key="index">
                    <img class="p-file" :src="item.url" alt="家访照片异常" @click="openBigPhoto(item.url)">
                </el-carousel-item>
            </el-carousel>
            <p v-else-if="this.visitPhotoData.length === 0" style="text-align: center;">暂无家访照片</p>
        </el-dialog>

        <!--大图片预览-->
        <el-dialog v-model="dialogBigPhoto" class="dialogBigPhoto" size="full">
            <img :src="BigPhotoUrl" alt="" id="rotateIMG">
        </el-dialog>
    </div>
</template>

<script>
    import { listLoanAssetConfirm, assetCheck, listLoanFee, returnLoanCheck } from "@/api/api";
    export default {
        name: "assetsConfirm",
        data () {
            return {
                total: 0,
                pagesize: ["10","30","50"],
                // 查询；
                searchItem: {
                    loanNo: "",
                    phone: "",
                    realName: "",
                    assetStatus: "",
                    pageNum: 1,
                    pageSize: 10
                },
                // 资产确认列表；
                tableData: [],
                // 资产确认提交数据；
                rmUserInfo: "",
                dialogAssetConfirm: false,
                AssetConfirm: {
                    loanNo: "",
                    passStatus: 1,
                    assetConfirmTime: new Date(),
                    assetUser: ""
                },
                // 资产确认弹窗规则；
                ruleAssetConfirm: {
                    // 确认时间
                    assetConfirmTime: [
                        { type: 'date', required: true, message: '确认时间不能为空' }
                    ]
                },
                // 费用核算表
                costAccountingDialog: false,
                LoanFee: {
                    productNo: "",
                    loanNo: ""
                },
                LoanFeeDetails: {
                    costAccountingSum: "",
                    listLoanFee: []
                },
                // 查看协议；
                protocolsDialog: false,
                protocolsData: [],
                // 查看家访照片
                visitPhotoDialog: false,
                visitPhotoData: [],
                // 大图片预览
                dialogBigPhoto: false,
                BigPhotoUrl: ''
            };
        },
        mounted () {
            this.$nextTick(() => {
                if (window.sessionStorage["sysUser"]) {
                    let userInfo = JSON.parse(window.sessionStorage.getItem("sysUser"));
                    this.rmUserInfo = userInfo.name;
                    this.AssetConfirm.assetUser = userInfo.userNo;
                } else {
                    this.$router.push({path: '/login'});
                }
                this.loadData();
            });
        },
        watch: {
            $route (to) {
                if(to.name === "assetsConfirm"){
                    this.loadData();
                }
            }
        },
        methods: {
            // 当前页码
            handleCurrentChange(val){
                this.searchItem.pageNum = val;
                this.loadData();
            },
            // 每页条数;
            handleSizeChange(val){
                this.searchItem.pageSize = val;
                this.loadData();
            },
            // 重置
            resetForm () {
                this.$refs.searchItem.resetFields();
            },
            // 资产确认列表、查询；
            async loadData () {
                let _this = this;
                await listLoanAssetConfirm(this.searchItem).then((res) => {
                    let Data = JSON.parse(res.data.ciphertext);
                    _this.tableData = Data.list;
                    console.log(_this.tableData);
                    _this.total = Data.total;
                    let arr = _this.tableData;
                    if (arr) {
                        for (let i=0; i<arr.length; i++) {
                            let rmStatusArr = ["未确认", "不通过", "通过"];
                            let visitStatusType = ["未家访", "家访不通过", "确认不通过", "已确认"];
                            let DateUnit = ["年", "月", "日"];
                            let signRepayType = ["到期还款", "先息后本", "等额本息", "等额本金"];
                            // 状态
                            arr[i].assetStatus = rmStatusArr[arr[i].assetStatus];
                            if (arr[i].visitStatus) {
                                arr[i].visitStatus = visitStatusType[arr[i].visitStatus];
                            }

                            // 申请时间
                            if (arr[i].createTime) {
                                arr[i].createTime = _this.formatTime(arr[i].createTime);
                            };

                            // 面签时间
                            if (arr[i].signTime) {
                                arr[i].signTime = _this.formatTime(arr[i].signTime);
                            };

                            // 面签期限
                            if (arr[i].signLoanTime) {
                                if (DateUnit[arr[i].signLoanUnit]) {
                                    arr[i].signLoanTime = arr[i].signLoanTime + DateUnit[arr[i].signLoanUnit];
                                }
                            };

                            // 申请期限
                            if (arr[i].loanTime) {
                                if(arr[i].loanUnit === "0" || arr[i].loanUnit === "1" || arr[i].loanUnit === "2"){
                                    arr[i].loanTime = arr[i].loanTime + DateUnit[arr[i].loanUnit];
                                } else {
                                    arr[i].loanTime = arr[i].loanTime + arr[i].loanUnit;
                                }
                            };

                            // 还款方式
                            arr[i].signRepayType = signRepayType[arr[i].signRepayType];
                            // 风控初审时间
                            if (arr[i].riskTime) {
                                arr[i].riskTime = _this.formatTime(arr[i].riskTime);
                            }

                            // 风控初审借款期限
                            if (arr[i].riskLoanTime) {
                                if (arr[i].riskLoanUnit) {
                                    arr[i].riskLoanTime = arr[i].riskLoanTime + DateUnit[arr[i].riskLoanUnit];
                                }
                            }

                            // 风控初审还款方式
                            arr[i].riskRepayType = signRepayType[arr[i].riskRepayType];
                        };
                    }
                });
            },
            // 打开资产确认；
            openAssetConfirm (rows) {
                this.AssetConfirm.loanNo = rows.loanNo;
                this.dialogAssetConfirm = true;
            },
            // 关闭资产确认；
            closeAssetConfirm () {
                this.dialogAssetConfirm = false;
                this.AssetConfirm.assetConfirmTime = new Date();
                this.AssetConfirm.assetUser = "";
                this.$refs.AssetConfirm.resetFields();
            },
            // 风控审核
            submitAssetConfirm () {
                this.$refs.AssetConfirm.validate((valid) => {
                    if (valid) {
                        this.postAssetConfirm();
                    } else {
                        return false;
                    }
                });
            },
            async postAssetConfirm () {
                let _this = this;
                await assetCheck(this.AssetConfirm).then(function(res) {
                    if (res.data.state.code === "200") {
                        _this.$message({
                            message: "成功",
                            type: 'success'
                        });
                        _this.dialogrmConfirmed = false;
                        _this.loadData();
                        _this.closeAssetConfirm();
                    } else {
                        _this.$message({
                            message: res.data.state.message,
                            type: 'error'
                        });
                    }
                });
            },
            // 打开手续费明细
            clickFeeAmount (rows) {
                this.costAccountingDialog = true;
                this.LoanFee.productNo = rows.productNo;
                this.LoanFee.loanNo = rows.loanNo;
                this.listFeeAmount();
            },
            // 手续费明细
            async listFeeAmount () {
                let _this = this;
                this.LoanFeeDetails.costAccountingSum = "";
                await listLoanFee(this.LoanFee).then((res) => {
                    let Data = JSON.parse(res.data.ciphertext);
                    _this.LoanFeeDetails.listLoanFee = Data;
                    for(let value of Data){
                        if(value.fee){
                            _this.LoanFeeDetails.costAccountingSum = Number(_this.LoanFeeDetails.costAccountingSum) + Number(value.fee);
                        }
                    }
                });
            },
            // 查看家访照片：
            openVisitPhoto (rows) {
                this.visitPhotoDialog = true;
                this.visitPhotoData = rows.data;
            },
            // 查看协议：
            openProtocolsDialog (rows) {
                this.protocolsDialog = true;
                this.protocolsData = rows.protocols;
            },
            // 退回
            returnLoan (row) {
                let _this = this;
                this.$confirm('是否退回?', '提示', {
                    confirmButtonText: '是',
                    cancelButtonText: '否',
                    type: 'warning'
                }).then(() => {
                    returnLoanCheck({
                        "loanNo": row.loanNo
                    }).then((res) => {
                        if (res.data.state.code === "200") {
                            _this.$message({
                                message: "成功",
                                type: 'success'
                            });
                            _this.loadData();
                        } else {
                            _this.$message(res.data.state.message);
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            // 大图片预览
            openBigPhoto (item) {
                this.dialogBigPhoto = true;
                this.BigPhotoUrl = item;
            }
        }
    };
</script>

<style lang="scss" scoped>
    .assetsConfirm{
        .interview-header{
            border: 1px solid #eee;
            margin:20px;
            padding:22px 0 0 20px;
            min-width: 1200px;
            box-sizing: border-box;
            .search-in{
                .search-item{
                    margin-right: 30px;
                }
            }
        }
        .table-box{
            border: 1px solid #eee;
            margin:20px;
            min-width: 1200px;
            .add-btn{
                margin: 20px;
                .el-icon-plus{
                    font-size:12px;
                }
            }
        }
        .pageNum{
            text-align: right;
            padding:0 10px;
            .el-pagination{
                padding: 0;
            }
        }
        .dialogAssetConfirm{
            .el-form {
                width: 564px;
                margin: 0 auto;
                .el-input {
                    width: 200px;
                }
            }
        }
        .costAccountingDialog{
            .costAccountingTable{
                width: 800px;
                position: fixed;
                top: 20%;
                left: 50%;
                margin-left: -400px;
                background: #fff;
            }
            .costAccountingBox{
                margin: 0 auto;
                border-top: 1px solid #eee;
                h3{
                    padding: 10px 0;
                    text-align: center;
                    border-bottom: 1px solid #eee;
                }
                .costTableInpu{
                    text-align: center;
                    padding: 20px 0;
                }
                .costTableItme{
                    padding: 0 30px;
                    margin-top:20px;
                    table{
                        border-spacing:0;
                        width: 100%;
                        text-align: center;
                        th{
                            padding: 10px 0;
                            background: #f2f2f2;
                        }
                        th,td{
                            border: 1px solid #eee;
                        }
                        td{
                            padding:10px 0;
                        }
                    }
                }
                .costAccountingBotton{
                    margin: 20px 0;
                    text-align: center;
                    button{
                        width: 180px;
                        margin: 0 30px;
                    }
                }
            }

        }
        .Dialog{
          img{
                max-width: 100%;
                max-height: 100%;
                display: block;
                margin: 0 auto;
                text-align: center;
          }
        }
      .dialogBigPhoto{
          img{
                max-width: 100%;
                max-height: 100%;
                display: block;
                margin: 0 auto;
                text-align: center;
          }
      }
    }
</style>
